<template>
    <div class="userCenter" :height="mainHeight">
        <Row v-for="(item,index) in data">
            <Col span="12" class="user_list">
            <Col span="4">
            服务器名：</Col><span v-show="('villageName'+item.id)!==showEdit">{{ item.villageName }}</span>
            <input type="text" v-show="('villageName'+item.id)==showEdit" v-model="data[index].villageName ">
            <!--<Icon type="ios-compose-outline"></Icon>-->
            <i class="ivu-icon ivu-icon-edit user_ionic" v-show="('villageName'+item.id)!==showEdit"
               @click="changeEditStatus('villageName'+item.id)"></i>
            <i class="ivu-icon ivu-icon-checkmark-round user_ionic" v-show="('villageName'+item.id)==showEdit"
               @click="changeEditStatus('villageName'+item.id)"></i>
            </Col>
            <Col span="12" class="user_list">


            <Col span="4">
            图片地址：</Col><span v-show="('photos'+item.id)!==showEdit">{{item.photos.split(',')[0]}}</span>
            <!--<img :src="photos" alt="这是商品图片">-->
            <input type="text" v-show="('photos'+item.id)==showEdit" v-model="data[index].photos.split(',')[0]"/>
            <!--<Icon type="ios-compose-outline"></Icon>-->
            <i class="ivu-icon ivu-icon-edit user_ionic" v-show="('photos'+item.id)!==showEdit"
               @click="changeEditStatus('photos'+item.id)"></i>
            <i class="ivu-icon ivu-icon-checkmark-round  user_ionic" v-show="('photos'+item.id)==showEdit"
               @click="changeEditStatus('photos'+item.id)"></i>
            </Col>
            <Col span="12" class="user_list">
            <Col span="4">
            ip地址：</Col><span v-show="('address'+item.id)!==showEdit">{{item.address}}</span>
            <input type="text" v-show="('address'+item.id)==showEdit" v-model="data[index].address">
            <!--<Icon type="ios-compose-outline"></Icon>-->

            <i class="ivu-icon ivu-icon-edit  user_ionic" v-show="('address'+item.id)!==showEdit"
               @click="changeEditStatus('address'+item.id)"></i>
            <i class="ivu-icon ivu-icon-checkmark-round  user_ionic" v-show="('address'+item.id)==showEdit"
               @click="changeEditStatus('address'+item.id)"></i>
            </Col>
            <Col span="12" class="user_list">
            <Col span="4">
            部门：</Col><span v-show="('city'+item.id)!==showEdit">{{item.city}}</span>
            <input type="text" v-show="('city'+item.id)==showEdit" v-model="data[index].city">
            <!--<Icon type="ios-compose-outline"></Icon>-->
            <i class="ivu-icon ivu-icon-edit  user_ionic" v-show="('city'+item.id)!==showEdit"
               @click="changeEditStatus('city'+item.id)"></i>
            <i class="ivu-icon ivu-icon-checkmark-round  user_ionic" v-show="('city'+item.id)==showEdit"
               @click="changeEditStatus('city'+item.id)"></i>
            </Col>

        </Row>
        <div class="operationInfo">
            <Col span="12">
            <Button class="infoBtn" type="primary" @click="showAddForm = true">添加</Button>

            </Col>
            <Col span="12">
            <!--<button class="infoBtn infoSubmit" :disabled="canSubmit" @click="infoSubmit">提交</button>-->
             <Button class="infoBtn infoSubmit" :disabled="canSubmit"   @click="infoSubmit">提交</Button>

            </Col>


        </div>

        <!--添加数据弹出层-->
        <div class="toolbar">
            <Modal
                    v-model="showAddForm"
                    title="添加"
                    @on-ok="ok">
                <Form :model="addData" :label-width="80">
                    <FormItem label="服务器名:">
                        <Input class="modalInput" v-model="addData.villageName" placeholder="服务器名"></Input>
                    </FormItem>
                    <!--                     <FormItem label="图片地址:">
                                            <Input v-model="addData..photos.split(',')[0]" placeholder="请输入图片地址"></Input>
                                        </FormItem> -->
                    <FormItem label="ip地址:">
                        <Input class="modalInput"  v-model="addData.address" placeholder="请输入ip地址"></Input>
                    </FormItem>
                    <FormItem label="部门:">
                        <Input class="modalInput"  v-model="addData.city" placeholder="请输入部门"></Input>
                    </FormItem>
                </Form>
            </Modal>
        </div>

    </div>
</template>

<script>
  //  import $ from 'jquery';
  import util from '../../libs/util'
  import modalMessage from '../../components/modalMessage.vue'
  export default {
    name: '',
    data () {
      return {
        name: '哈哈',
        showEdit: '', //判断显示哪一个的编辑
        data: [],
        // photos: {},
        canSubmit: true,
        showAddForm: false,
        mainHeight:window.innerHeight-200,
        addData: {
          'villageName': '',
          'address': '',
          'city': '',
        } //添加的数据
      }
    },
    components: {
      modalMessage
    },
    created() {
      this.getInfo()
    },
    methods: {
//        makeEdit() {
//          this.flag = !this.flag
//        },
      changeEditStatus(id) {
        //编辑状态控制 id为编辑框的唯一值
        if (this.showEdit == id) {
            /*当前出于编辑状态是点击退出编辑状态*/
          this.showEdit = ''
          this.canSubmit = false
        } else {
            /*所选的编辑不处于编辑状态或者其他的字段处于编辑状态*/
          this.showEdit = id
        }
      },
      getInfo() {
//          var _this = this
        let url = '/react-service/api/houseInfo/getDetail.do'
        let ajaxUrl = 'http://121.40.178.164:4040'
        let data = {
          id: '8a2f424c5bd7c854015c0aa783d401d3'
        }
//          data = Qs.stringify(data)
//          $.ajax({
//            url: 'http://121.40.178.164:4040/agent-service/api/user/login.do',
//            contentType: 'application/x-www-form-urlencoded',
//            type: 'post',
//            data: {
//              loginName: 'admin',
//              loginPwd:'123456'
//            }
//          }).done((result) => {
//            console.log(result);
//          })
        util.ajax.post(url, data).then((result) => {
          let data = result.data.res.data.record
          this.data.push(data)
          this.canSubmit = true
          // this.data=data;
//            this.data = data
          // let photos = this.data.photos.split(',')[0]

          // this.photos = photos
//              this.photos =ajaxUrl + photos
          // console.log(photos)
        }).catch((error) => {
          console.log(error)
        })
      },
      infoSubmit() {
        alert('我在提交数据啦。。。。')
        let url = '/react-service/api/houseInfo/getDetail.do'
        // let data = {
        //   id: '8a2f424c5bd7c854015c0aa783d401d3'
        // }
        let data = this.data
        // this.data.push(data)
        util.ajax.post(url, data).then((res) => {
          console.log(res)
        })
      },
      ok () {
        let url = '/react-service/api/houseInfo/getDetail.do'
          /*获取到添加的数据*/
        alert('添加的数据为' + JSON.stringify(this.addData))
        let data = this.addData
        console.log(this.addData)
          /*请求接口*/
        util.ajax.post(url, data).then((res) => {
          console.log(res)
        })
          /*获取最新数据*/
        this.getInfo()
      }
    },
    watch: {
      'data': {
        deep: true,
        handler: function (v, ov) {
          console.log(v)
          console.log(ov)
          console.log(v[0].address)
          console.log(ov[0].address)
          console.log(this.canSubmit)
//          if (this.canSubmit) {
//            this.canSubmit = true
//          }
        }
      }
    }
  }
</script>


<style scoped>
    .user_list {
        padding: 20px 0;
    }

    .user_ionic {
        margin-left: 10px;
    }

    .operationInfo {
        float: right;
        padding: 2% 5%;
    }

    .infoSubmit {
        background: #F96F39;
        color: #fff;
        border-color: #F96F39;
        margin-left: 20px;
    }

    .infoSubmit:hover {
        background: #FF9800;
        color: #fff;
        border-color: #FF9800;
    }

    .infoBtn {
        width: 90px;
    }

    .ivu-icon {
        cursor: pointer;
    }

    .ivu-icon-edit:hover {
        color: #F96F39;
    }

    .ivu-icon-checkmark-round:hover {
        color: #F96F39;
    }
    .modalInput{
        width: 68%;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: #fff;
        border-radius: 4px;
        box-sizing: border-box;
        color: #1f2d3d;
        height: 40px;
        line-height: 1;
        outline: 0;
        padding: 3px 10px;
        font-size: 16px;
    }

</style>
